/*
	SCREEN STYLES
	
	Copyright 2010 Sean Mullin, parametercontraption.com
	Released under an MIT License http://www.opensource.org/licenses/mit-license.php
	
	Compiled using pieces from HTML5 Boilerplate, Blueprint CSS and Less 2 Framework
		
*/

@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/forms.css";

/* basic style declarations:

#id, .class {

	css 2.1 styles
	css 3 styles

}

	Default 5-column, 768 px layout for iPads, netbooks, small(er)
	screens and IE (All other layouts inherit styles from this layout)
	XXXpx/XXem(16px)/XXem(18px)
	------------------------------------------------------------------
	1      		2      		3      		4      		5     
	120px  		264px  		408px  		552px  		696px   (24px/1.5em gutters)
	7.5em		16.5em		25.5em		34.5em		43.5em
*/

/* body, general styles ---------------------------------------------------------- */
body { padding: 0 2.25em; margin: 0 auto; width: 43.5em; background: #333; }

.advert468 { margin: 10px; width: 468px; height: 60px; background: #ccc; } 


/* header ------------------------------------------------------------------------ */
header { width: 100%; height: 164px; float: left; background: url(../images/design/header_bg.jpg) top center no-repeat; }
#logo { width: 240px; margin: 24px 0 24px 24px; float: left; position: absolute; z-index: 2 }


/* global nav -------------------------------------------------------------------- */
header nav ul { list-style: none; float: left; height: 48px; padding-top: 24px; background: rgba(0,0,0,.65); box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; -webkit-box-shadow: 0px 0px 10px #000; width: 696px; margin: 48px 0 0 0; position: absolute; clip: rect(-10px 696px 86px 0px); }
header nav ul li { display: inline; width: 60px; margin: 0 4px; font-family: "Rockwell", serif; font-weight: bold; }
header nav ul li:nth-of-type(1) { margin-left: 288px; }
header nav ul li a, header nav ul li a:active, header nav ul li a:visited { color: #f3f3d0; text-shadow: #000 0px 0px 10px; }

footer nav ul { list-style: none; float: right; margin: 0; width: 364px; }
footer nav ul li { float: left; text-align: center; width: 76px; }


/* content ----------------------------------------------------------------------- */
#content { background: #fff; float: left; width: 43.5em; margin: 1.5em 0; padding: 1.5em 0; }

#indexCTA { width: 408px; float: left; }

td p { margin: 0; }
.controls { font-size: 10px; }

.logo { margin: 0 5px 0 0; max-width: 100px; }
.city { display: block; width: 100px; }
.team { display: block; width: 100px; font-size: 3em; margin: 0; }


/* Scorecard --------------------------------------------------------------------- */
.currentInning { background: #fc3; font-weight: bold; }
#boxScore th, #boxScore td { text-align: center; }
#boxScore th:nth-of-type(1), #boxScore td:nth-of-type(1) { text-align: left; }

#scorecardAway th, #scorecardHome th { text-align: center; }
td.atbat { width: 30px; height: 30px; background: url(../images/design/diamond.png) no-repeat; background-size: 30px auto; }

/* jQuery UI --------------------------------------------------------------------- */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.75); z-index: 3; }
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; background: #fff; }
.ui-dialog .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0; width: 100%; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
a.ui-dialog-titlebar-close { display: none; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; cursor: se-resize; background: #000; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
.ui-dialog fieldset { width: 648px; padding: 1.4em 0 0 0; margin: 0; }


/* footer ------------------------------------------------------------------------ */
footer { float: left; width: 100%; }
footer p { float: left; }
footer p, footer ul { font-size: 12px; }


.left { margin-left: 0; }
.right { margin-right: 0; float: right; }

/* print styles inline to avoid uneccessary http request */
@media print { @import "print.css"; }

/* Media queries for responsive design */
@media all and (orientation:portrait) { 
  /* Style adjustments for portrait mode goes here */
  
}

@media all and (orientation:landscape) { 
  /* Style adjustments for landscape mode goes here */
  
}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {  
  /* Prevent iOS, WinMobile from adjusting font size */
  html { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; } 
}